import React, { useContext, useEffect, useState } from "react";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { AtImagePicker, AtToast } from "taro-ui";

import api from "@api/api.js";
import { uploadImgs } from "@util/util";

import "./index.less";

export default () => {
  const [list, setList] = useState([]);
  const [toast, setToast] = useState({ text: "", isOpened: false });
  useEffect(() => {
    getExpertData();
  }, []);
  // 获取认证资料
  const getExpertData = async () => {
    const {
      data: { expertImg },
    } = await api.getExpertData();
    const imgs = expertImg.map((item) => ({
      url: api.bseUrl + item.path,
      id: item.id,
    }));
    setList(imgs);
  };
  // 图片上传
  const uploadImg = (file) => {
    setList(file);
  };
  // 申请认证
  const saveCertification = async () => {
    const [imgIds] = await Promise.all([uploadImgs(list)]);
    const { data } = await api.saveCertification({ imgIds });
    setToast({
      text: data,
      isOpened: true,
    });
  };
  return (
    <View className="bgBox">
      <AtToast {...toast}></AtToast>
      <View className="listBox">
        <View className="dec borderBottom">
          <View className="decList">
            <Text>*</Text>
            <View>
              请提交能够证明您专家身份的资料图片，详细的认证资料有利于提升认证速度
            </View>
          </View>
          <View className="decList">
            <Text>*</Text>
            <View>
              请上传 PNG 或 JPG 格式的图片文件，单个文件大小请不要超过 1MB
            </View>
          </View>
          <View className="decList">
            <Text>*</Text>
            <View>
              发起认证后，我们将会在 3-5 个工作日内进行处理，请耐心等待
            </View>
          </View>
        </View>
        <View className="upload">
          <View className="fontBold">认证资料上传</View>
          <AtImagePicker
            length={3}
            files={list}
            onChange={uploadImg.bind(this)}
          />
        </View>
      </View>
      <View className="bottomBtn" onClick={saveCertification}>
        <View>申请认证</View>
      </View>
    </View>
  );
};
